{% extends "../layouts/admin.html" %} {% block content %}

<header class="header navbar bg-white shadow">
	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn" href="/store/goods/add" data-pjax><i class="ti-plus"></i> 新增商品</a>
		<button class="btn btn-danger navbar-btn" onclick="delCheck()"><i class="ti-close"></i> 删除选中</button>
	</div>

</header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">
		<input id="unitid" type="hidden">
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>主图</th>
					<th>市场价</th>
					<th>零售价</th>
					<th>分类</th>
					<th>品牌</th>
					<th>库存数量</th>
					<th>是否在售</th>
					<th>是否新品</th>
					<th>是否热销</th>
					<th>操作</th>
				</tr>

		</table>
	</div>
</div>

<!-- 删除商品 -->
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">删除商品</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						商品删除后无法恢复，确定删除吗？ <br/>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
			</div>
		</div>
	</div>
</div>
<!-- 删除选中商品 -->
<div id="dialogDeleteCheck" class="modal fade bs-modal-lg" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">删除商品</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 mb10">
						商品删除后无法恢复，确定删除已选商品吗？
					</div>
					<div class="col-xs-12">
						<ul id="checkedUser" class="list-group"></ul>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
			</div>
		</div>
	</div>
</div>
<div id="dialogDetail" class="modal fade bs-modal" tabindex="-3" role="dialog" aria-hidden="true">
	<div class="modal-dialog"  style="width:800px">
		<div class="modal-content">
		</div>
	</div>
</div>

<script language="JavaScript">
	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,
			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/store/goods/index",
				"type": "post",
				"data": function(d) {

				}
			},
			"order": [
				[0, 'desc']
			],
			"columns": [{
					"data": "id",
					"bSortable": true
				}, {
					"data": "goods_sn",
					"bSortable": true
				},
				{
					"data": "name",
					"bSortable": true
				},
				{
					"data": "primary_pic_url",
					"bSortable": true
				},
				{
					"data": "market_price",
					"bSortable": true
				},
				{
					"data": "retail_price",
					"bSortable": true
				},
				{
					"data": "category_id",
					"bSortable": true
				},
				{
					"data": "brand_id",
					"bSortable": true
				},
				{
					"data": "goods_number",
					"bSortable": true
				},
				{
					"data": "is_on_sale",
					"bSortable": true
				},
				{
					"data": "is_new",
					"bSortable": true
				},
				{
					"data": "is_hot",
					"bSortable": true
				}

			],
			"columnDefs": [{
					"render": function(data, type, row) {
						return "<img src='" + data + "' onclick=sublime.picture('" + data + "')>"
					},
					"targets": 3
				},
				{
					"render": function(data, type, row) {
						if(!data) {
							return '无'
						}
						return row.category.name;
					},
					"targets": 6
				},
				{
					"render": function(data, type, row) {
						if(!data) {
							return '无'
						}
						return row.brand.name;
					},
					"targets": 7
				},
				{
					"render": function(data, type, row) {
						if(data == 1) {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
						}
						else {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
						}
					},
					"targets": 9
				},
				{
					"render": function(data, type, row) {
						if(data == 1) {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
						}
						else {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
						}
					},
					"targets": 10
				},
				{
					"render": function(data, type, row) {
						if(data == 1) {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
						}
						else {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
						}
					},
					"targets": 11
				},

				{
					"render": function(data, type, row) {
						return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
							' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
'<li><a href="/store/goods/detail?id=' + row.id + '" data-toggle="modal" data-target="#dialogDetail">详情</a></li>' +
							'<li><a href="/store/goods/edit?id=' + row.id + '" data-pjax>编辑</a></li>' +
							'<li><a href="javascript:;" onclick=del("' + row.id + '")>删除</a></li>' +

							'</ul></div>';
					},
					"targets": 12
				}

			]
		});
		datatable.on('click', 'tr', function() {
			$(this).toggleClass('selected');
		});
		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});
	}

	$(function() {
		initDatatable();
		$("#dialogDetail").on("hidden.bs.modal", function() {
			$(this).removeData("bs.modal");
		});
	});

	function del(id) {
		var dialog = $("#dialogDelete");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			$.post("/store/goods/delete", {
				id: id
			}, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				}
				else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		});
	}

	function delCheck() {
		var chks = datatable.rows('.selected').data();
		if(chks.length > 0) {
			var ids = [];
			$.each(datatable.rows('.selected').data(), function(i, n) {
				ids.push(n.id);
			});
			var dialog = $("#dialogDeleteCheck");
			dialog.modal("show");
			dialog.find("#ok").unbind("click");
			dialog.find("#ok").bind("click", function(event) {
				var btn = $(this);
				btn.button("loading");

				$.post("/store/goods/delete", {
					"ids": JSON.stringify(ids)
				}, function(data) {
					if(data.errno == 0) {
						datatable.ajax.reload(null, false);
					}
					else {
						Toast.error(data.errmsg);
					}
					btn.button("reset");
					dialog.modal("hide");
				}, "json");
			});
		}
		else {
			Toast.warning("请先选择要删除的商品！");
		}
	}
</script>
{% endblock %}